// >>>>> 侧边栏 <<<<<

.sidebar {
    // 侧边栏项
    &-item {
        @apply text-sm;

        // 路由激活状态
        .router-link-active {
            background-color: #009688 !important;
            @apply text-white;
        }

        // 项展开状态
        &.is-expanded {
            > .sidebar-link {
                @apply text-white;

                // &:hover {
                //     background-color: rgba(0, 0, 0, 0);
                // }

                .sidebar-expansion_icon {
                    transform: translateY(calc(-50% + -3px));
                    border-color: transparent transparent rgba(255, 255, 255, 1)
                        transparent;
                }
            }

            > .sidebar-sub_sidebar {
                @apply block;
            }
        }
    }

    // 侧边栏链接
    &-link {
        @apply block relative transition-colors px-4 py-5 text-white text-opacity-70;

        &:hover {
            @apply text-opacity-100 bg-black bg-opacity-60;

            .sidebar-expansion_icon {
                border-top-color: rgba(255, 255, 255, 1);
            }
        }
    }

    // 侧边栏展开图标
    &-expansion_icon {
        border-width: 6px;
        transform: translateY(calc(-50% + 3px));
        border-color: rgba(255, 255, 255, 0.7) transparent transparent
            transparent;
        @apply w-0 h-0 border-solid absolute mr-5 top-1/2 right-0 transition-all duration-200;
    }

    // 副侧边栏
    &-sub_sidebar {
        @apply hidden bg-black bg-opacity-30;

        .sidebar {
            &-item {
                .sidebar-link {
                    @apply py-4 pl-8;
                }

                & & .sidebar-link {
                    @apply py-4 pl-12;
                }
            }
        }
    }
}
